<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!--jstl导入  -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>自习室公告</title>
<!-- 引入layui.css文件 -->
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<!-- 引入layui.js文件 -->
<script src="layui/layui.js" charset="utf-8"></script>

<!--导航 -->
<link rel="stylesheet" href="qiandaohang/css/nav.css">
<link rel="stylesheet" type="text/css" href="announcement/css/style.css" />
</head>
<body>
<!-- 导航栏 -->
<div id="nav" data-scroll="1">
        <div class="center">
            <a href="Seat.jsp">
                <span>
                    <img src="./imgs/home.png" alt="">
                </span>
                <dl>
                    <dt>预约自习室</dt>
                    <dd>appointment</dd>
                </dl>
            </a>
            <a href="announcement.jsp">
                <span>
                    <img src="qiandaohang/imgs/instruction.png" alt="">
                </span>
                <dl>
                    <dt>公告中心</dt>
                    <dd>Announcement</dd>
                </dl>
            </a>
            <a href="personalInfo.jsp">
                <span>
                    <img src="qiandaohang/imgs/products.png" alt="">
                </span>
                <dl>
                    <dt>个人中心</dt>
                    <dd>Personal</dd>
                </dl>
            </a>

            <a href="#">
                <span>
                    <img src="qiandaohang/imgs/video.png" alt="">
                </span>
                <dl>
                    <dt>退出</dt>
                    <dd>quit</dd>
                </dl>
            </a>
        </div>
    </div>

    <script>
        window.onscroll = function () {
            var scrollTop = (document.documentElement && document.documentElement.scrollTop) || document.body
                .scrollTop;
            var nav = document.querySelector("#nav");
            if (scrollTop <= 100) {
                nav.setAttribute('data-scroll', '1');
            } else {
                nav.setAttribute('data-scroll', '0');
            }
        }
    </script>
<div class="container">
	<div class="main">
		<div class="title">
			<h4>自习室公告</h4>
			<p>announcement</p>
		</div>
		<ul>
			<li class="one" style="margin-left: 230px;">
				<a href="#">
					<img src="announcement/images/图片1.png" style="width: 450px;height: 600px;"/>
					<div class="news-title">
						<h5>公告</h5>
						<p>announcement</p>
						<i class="icon-news"></i>
					</div>
				</a>
			</li>
<!-- 如果属性范围内的pd为null，我们就跳转到GonGaoServlet去获取数据，然后再转发回来 -->
		<c:if test="${pd==null}">
			<!-- c:redirect 跳转到 GongGaoServlet -->
			<c:redirect url="GongGaoServlet?op=queryAnnByPage"></c:redirect>
		</c:if> 
		 <c:forEach items="${pd.data}" var="announcement">
			<li class="three">
				<a href="comment.jsp?date=${announcement.tdate}&tinfo=${announcement.tinfo}">
					<div class="left">
						<h4>${announcement.tdate}</h4>
					</div>
					<div class="right">
					 	<h5>${announcement.tinfo}</h5>
						<img src="announcement/images/new-jiantou.jpg" />
						
					</div>
				</a> 
			</li>
			</c:forEach>
		</ul>
	</div>
	
 <!--分页  -->
 <!-- 显示 分页导航区域 -->
 <div id="pagediv" style="position: absolute;left: 450px;margin-top:620px;">123</div>
</div>
   
 <!--填充指定div内容  -->
 <script>
	layui.use(['laypage', 'layer'], function(){
	  var laypage = layui.laypage
	  ,layer = layui.layer;
	  
	//完整功能
	  laypage.render({
	    elem: 'pagediv'
	    ,count: ${pd.totalCount}
	    ,curr: ${pd.page}
	    ,limit:${pd.pageSize}
	    ,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
	    ,jump: function(obj, first){
		    //obj包含了当前分页的所有参数，比如：
		    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
		    console.log(obj.limit); //得到每页显示的条数
		    
		    //首次不执行
		    if(!first){
		      //do something
		       location.href="GongGaoServlet?op=queryAnnByPage&page="+obj.curr+"&pagesize="+obj.limit;
		    }
		  }
	  });
	/*  lauui删除弹框*/
	  
	});
  
</script>  
</body>

</html>